<template>
  <div class="app-container">
    <div class="filter-container filter1">
      <el-select v-model="listQuery.type" placeholder="设备类型">
        <el-option
          v-for="item in deviceType"
          :key="item"
          :label="item"
          :value="item"
        />
      </el-select>
<!--      <el-select v-model="listQuery.model" placeholder="设备型号">-->
<!--        <el-option-->
<!--          v-for="item in deviceModel"-->
<!--          :key="item"-->
<!--          :label="item"-->
<!--          :value="item"-->
<!--        />-->
<!--      </el-select>-->
<!--      <el-select v-model="listQuery.code" placeholder="设备编码">-->
<!--        <el-option-->
<!--          v-for="item in deviceCode"-->
<!--          :key="item"-->
<!--          :label="item"-->
<!--          :value="item"-->
<!--        />-->
<!--      </el-select>-->
      <el-input v-model="listQuery.time" placeholder="完成月份" style="width: 100px;" class="filter-item" @keyup.enter.native="handleFilter" />

      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        搜索
      </el-button>
    </div>
    <el-table
      v-loading="listLoading"
      :data="list"
      border
      element-loading-text="Loading"
      height="900"
      style="width: 100%"
    >
      <el-table-column type="expand">
        <template slot-scope="devices">
          <el-table
            :data="devices.row.list"
            style="width: 100%"
            show-header="false"
          >
            <el-table-column fixed label="参数名称" align="center" width="120px">
              <template slot-scope="list">
                {{ list.row.name }}
              </template>
            </el-table-column>
            <!--<el-table-column label="月完成进度" width="1600px">
              <template slot-scope="procedures">
                <ul class="box-31">
                  <li v-for="(item, index) in 31">
                    <div class="div1">{{index+1}}</div>
                    <div class="div2">{{procedures.row.mouthCountArray[index]}}</div>
                  </li>
                </ul>
              </template>
            </el-table-column>-->
            <el-table-column label="日期(分钟)">
              <el-table-column v-for="(item, index) in 31" :label="index+1" width="80px" align="center">
                <template slot-scope="list">
                  {{ (list.row.name.indexOf('率')!=-1||list.row.name.indexOf('OEE')!=-1)? list.row.dayArray[index].toFixed(2):list.row.dayArray[index] }}
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="合计">
              <template slot-scope="list">
                {{ list.row.monthTotal }}
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-table-column>
      <el-table-column label="序号" width="50px" type="index" align="center" />

      <el-table-column label="设备编码" align="center" prop="code">
        <template slot-scope="scope">
          {{ scope.row.code }}
        </template>
      </el-table-column>

      <el-table-column label="设备名称" align="center" prop="name">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column label="设备型号" align="center" prop="model">
        <template slot-scope="scope">
          {{ scope.row.model }}
        </template>
      </el-table-column>
      <el-table-column label="设备类型" align="center" prop="type">
        <template slot-scope="scope">
          {{ scope.row.type }}
        </template>
      </el-table-column>

    </el-table>

<!--    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />-->

  </div>
</template>

<style>
  * {
    font-size: 12px;
    margin: 0;
    padding: 0;
  }
  .box-31 {
    /*width: 700px;*/
  }
  .box-31 li{
    float: left;
    list-style: none;
    display: inline-block;
    height: 50px;
    width: 50px;
    border-bottom: 1px dashed rgba(158, 177, 199, 0.4);
    border-right: 1px dashed rgba(158, 177, 199, 0.4);
    /*border-style: dot-dash;*/
  }
  .box-31 .div1{
    color: rgba(158, 177, 199, 0.4);
    text-align: center;
  }
  .box-31 .div2{
    text-align: center;
  }
  .filter1{
    margin-bottom: 20px;
    margin-left: 100px;
  }
</style>

<script>
import { deviceOee1, getdeviceclassify } from '@/api/deviceOee'
import Pagination from '@/components/Pagination'

export default {
  components: { Pagination },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      list: null,
      listLoading: true,
      total: 0,
      deviceCode: [''],
      deviceModel: [''],
      deviceType: [''],
      listQuery: {
        page: 1,
        limit: 10,
        time: '2019-11',
        code: undefined,
        model: undefined,
        type: undefined
      },
      value: new Date()
    }
  },
  created() {
    this.getList()
    this.getclassify()
    console.log('---' + this.list)
  },
  methods: {
    getclassify() {
      getdeviceclassify().then(response => {
        this.deviceCode = response.data.items[0].code
        this.deviceModel = response.data.items[0].model
        this.deviceType = response.data.items[0].type
        this.deviceCode.unshift('')
        this.deviceModel.unshift('')
        this.deviceType.unshift('')
      })
    },
    getList() {
      this.listLoading = true
      deviceOee1(this.listQuery).then(response => {
        this.list = response.data.items
        this.total = response.data.total
        // 这是处理当前的下拉框
        // this.getDeviceDtail()
        // Just to simulate the time of the request
        setTimeout(() => {
          this.listLoading = false
        }, 1.5 * 1000)
      })
    },
    getNowFormatDate() {
      const date = new Date()
      const seperator1 = '-'
      const year = date.getFullYear()
      let month = date.getMonth() + 1
      if (month >= 1 && month <= 9) {
        month = '0' + month
      }
      const currentdate = year + seperator1 + month
      return currentdate
    },
    getDeviceDtail() {
      var codeMap = new Map()
      codeMap.set('', '')
      var modelMap = new Map()
      modelMap.set('', '')
      var typeMap = new Map()
      typeMap.set('', '')
      for (var item of this.list) {
        codeMap.set(item.code, item.code)
        modelMap.set(item.model, item.model)
        typeMap.set(item.type, item.type)
      }
      this.deviceCode = [...codeMap.keys()]
      this.deviceModel = [...modelMap.keys()]
      this.deviceType = [...typeMap.keys()]
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    }
  }
}
</script>
